<template>
	<u-popup v-model="show" mode="center" border-radius="16">
		<view class="check-device-wrap">
			<view class="check-header">
				<text class="header-tit">请选择切换的设备</text>
				<image @click="handleClose" src="/static/img/close_icon.png" mode="aspectFill" class="close-icon">
				</image>
			</view>
			<scroll-view scroll-y="true" class="list-scroll">
				<view class="device-item" v-for="(item,index) in list" :key="index"
					:class="[item.shebei_id === deviceId ? 'active' : '']" @click="handleCheckItem(item)">
					<view class="item-header">
						<image class="header-icon" mode="aspectFill"></image>
						<text class="device-status">4G已连接</text>
						<text class="service-text">{{ item.shebei.leixing }}</text>
					</view>
					<view class="device-no">
						<text>编号：{{ item.shebei.bianma }}</text>
					</view>
					<view class="device-no device-type">
						<text>型号：{{ item.shebei.xinghao }}</text>
					</view>
				</view>
			</scroll-view>
			<view class="footer-wrap flex align-center">
				<u-button type="warning" shape="circle" @click="handleAddDevice">
					<view class="flex align-center">
						<u-icon name="plus" />
						<text style="margin-left: 4rpx;margin-bottom: 3rpx;">添加设备</text>
					</view>
				</u-button>
				<u-button type="primary" shape="circle" @click="handleConfirm">
					确定
				</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import { request, showLoading, toast } from '@/utils/tool';

	export default {
		data() {
			return {
				show: false,
				deviceId: "",
				list: []
			}
		},
		emits: ["change"],
		methods: {
			async handleBindDevice(bianma) {
				const hide = showLoading("正在绑定")
				const resp = await request({
					url: "/shebei/addusershebei",
					method: "POST",
					data: {
						bianma
					}
				}).finally(hide)
				const { code, msg } = resp
				if (code !== 1) {
					return toast({ title: msg || "绑定失败" })
				}
				toast({ title: "绑定成功" })
				this.initData()
				this.$store.dispatch("initUserDevice")
			},
			handleAddDevice() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: ev => {
						const { result } = ev
						if (!result) return toast({ title: "获取设备ID失败" })
						this.handleBindDevice(result)
					},
					fail: error => {
						console.log(error, 'error');
						toast({ title: "扫描失败" })
					}
				})
			},
			handleConfirm() {
				const { deviceId } = this
				this.$store.commit("setActiveDeviceId", deviceId)
				this.$emit("change")
				this.handleClose()
			},
			handleCheckItem(rowItem) {
				const { shebei_id } = rowItem
				this.deviceId = shebei_id
			},
			handleClose() {
				this.show = false
			},
			async initData() {
				const hide = showLoading("正在获取")
				const resp = await request({
					url: '/shebei/usershebeilist',
					method: "GET"
				}).catch(hide)
				this.list = resp.data || []
				hide()
			},
			open(deviceId) {
				this.show = true
				this.deviceId = deviceId
				this.initData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-device-wrap {
		width: 668rpx;
		background: #FFFFFF;
		padding: 28rpx 20rpx;
		box-sizing: border-box;
		position: relative;

		.footer-wrap {
			margin-top: 20rpx;
			justify-content: space-between;
			padding: 0 32rpx;

			::v-deep button {
				margin: 0;
				width: 260rpx;
			}
		}

		.list-scroll {
			margin-top: 24rpx;
			width: 100%;
			height: 740rpx;

			.device-item {
				padding: 18rpx;
				position: relative;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				--main-color: #666;
				--service-color: #3361F0;
				border: 2rpx solid #D8D8D8;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}

				&.active {
					--main-color: #ffffff;
					--service-color: #ffffff;
					background-color: #3361F0;
					border-color: #3361F0;
				}

				.device-no {
					margin-top: 14rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: var(--main-color);
					letter-spacing: 1px;
					line-height: 40rpx;
				}

				.item-header {
					display: flex;
					align-items: center;

					.service-text {
						line-height: 38rpx;
						font-size: 24rpx;
						color: var(--service-color);
						letter-spacing: 1px;
						margin-left: auto;
					}

					.device-status {
						font-weight: 400;
						font-size: 28rpx;
						color: var(--main-color);
						letter-spacing: 1px;
						line-height: 38rpx;
					}

					.header-icon {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		.check-header {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.close-icon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 50%;
				right: 16rpx;
				transform: translateY(-50%);
			}

			.header-tit {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 48rpx;
			}
		}
	}
</style>